<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <!--先引入插件-->
    <!--3.引入js代码-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--2.bootstrap插件-->
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--1.datetimepicker-->
    <link rel="stylesheet" type="text/css"
          href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <title>测试日历功能</title>

    <script type="text/javascript">
        $(function () {
            //给input输入框添加一个事件，用来显示日历
            $("#datepicker").datetimepicker({
                //使用封装好的一些参数
                language: 'zh-CN',//1.设置语言
                format: 'yyyy-mm-dd',//2.显示日期的格式
                minView: 'month',//3.显示到最小的窗口
                initData: new Date(),//4.显示的初始的日期
                autoclose: true,//5.选择完日期后是否自动关闭
                todayBtn:true,//6.是否开启“今天选择按钮”
                clearBtn:true,//7.是否开启清空按钮

            });
        });
    </script>
</head>

<body>
<!--
    引入输入框给日历功能一个容器
    添加readonly属性，只能读不能改
-->
<input id="datepicker" type="text" readonly>
</body>
</html>
